<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16.弹出层</title>
    <link rel="stylesheet" href="../layui-v2.7.6/layui/css/layui.css">
<!--    <style>-->
<!--        body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}-->
<!--        body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}-->
<!--        body .demo-class .layui-layer-btn a{background:#333;}-->
<!--        body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}-->
<!--    </style>-->
</head>
<body>
<script type="text/javascript" src="../layui-v2.7.6/layui/layui.js"></script>
<script type="text/javascript" src="../layui-v2.7.6/layui/jquery-1.10.1.js"></script>
<script src="layer.js"></script>

<div id="bhid">
    捕获层做一下实验
</div>

<!--<p id = 'p1'> 这事一个p</p>-->
<script>
// 这个是最简单的弹窗，关键字是msg
layui.use('layer', function(){
    var layer = layui.layer;

    // layer.msg('hello');

    //标题
    // layer.open({
    //     content : 'message',
    //     type: 0,
    //     title :  ['标题', 'font-size:18px;']
    // })

    //类型2
    // layer.open({
    //     type: 2,
    //     title: '标题',
    //     content : 'https://www.baidu.com',
    //     skin: 'layui-layer-rim', //加上边框
    //     area: ['1070px', '550px'], //设置宽高
    //     btn: ['按钮1','按钮2'],
    //     btn1:function(index, layero){
    //         // 按钮1的逻辑
    //     },
    //     btn2:function(index, layero){
    //         // 按钮2的逻辑
    //     },
    //     cancel: function(){
    //         // 右上角关闭事件的逻辑
    //     }
    // });

    // layer.open({
    //     type: 4,
    //     content: ['标题','#p1'],
    //     area: ['1070px', '550px']//设置宽高
    // })

    //皮肤
    // layer.config({
    //     skin: 'demo-class'
    // })

    // layer.open({
    //     content : 'message',
    //     type: 0,
    //     title :  ['标题', 'font-size:18px;'],
    // })

    // //设置宽高
    // layer.open({
    //     content: 'message',
    //     //这个地方一定要加单位，不然就是默认的
    //     area:['500px','300px']
    // })


    //位置
    // layer.open({
    //     content : 'message',
    //     offset : ['33px','99px']
    // })

    // layer.alert('酷毙了', {icon: 1});
    // layer.msg('不开心。。', {icon: 7}); 1- 7
    // layer.load(2); //加载风格   0-2

    //iframe 层
    // layer.open({
    //     type: 2,
    //     title: '很多时候，我们想最大化看，比如像这个页面。',
    //     shadeClose: true,
    //     shade: false,
    //     maxmin: true, //开启最大化最小化按钮
    //     area: ['893px', '600px'],
    //     content: 'https://www.baidu.com/'
    // });

    //初体验
    // layer.alert('内容', {
    //     icon: 1,
    //     skin: 'layer-ext-demo' //见：扩展说明
    // })

    //询问框
    // layer.confirm('您是如何看待前端开发？', {
    //     btn: ['重要','奇葩'] //按钮
    // }, function(){
    //     layer.msg('的确很重要', {icon: 1});
    // }, function(){
    //     layer.msg('也可以这样', {
    //         time: 20000, //20s后自动关闭
    //         btn: ['明白了', '知道了']
    //     });
    // });

    //提示
    // layer.msg("简单的信息！")

    //墨绿深蓝风
    // layer.alert('墨绿风格，点击确认看深蓝', {
    //     skin: 'layui-layer-molv' //样式类名
    //     ,closeBtn: 0
    // }, function(){
    //     layer.alert('偶吧深蓝style', {
    //         skin: 'layui-layer-lan'
    //         ,closeBtn: 0
    //         ,anim: 4 //动画类型
    //     },function () {
    //         layer.alert('再次套娃',{
    //             anim: 3
    //             }
    //         )
    //
    //     });
    // });

    // //捕获页
    // layer.open({
    //     type: 1,
    //     shade: false,
    //     title: false, //不显示标题
    //     content: $('#bhid'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
    //     cancel: function(){
    //         layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
    //     }
    // });

    //页面层
    // layer.open({
    //     type: 1,
    //     skin: 'layui-layer-rim', //加上边框
    //     area: ['420px', '240px'], //宽高
    //     content: 'html内容'
    // });

    //tips层
    // layer.tips("<span style='color:red'>红色字体</span>","#bhid",{tips:[1,'#ff4']});
    // layer.tips("普通提示","#bhid",{tips:1});

    //iframe 层
    // layer.open({
    //     //这个2代表的就是iframe，就是嵌入页面
    //     type: 2,
    //     title: '很多时候，我们想最大化看，比如像这个页面。',
    //     shadeClose: true,
    //     shade: false,
    //     maxmin: true, //开启最大化最小化按钮
    //     area: ['600px', '300px'],
    //     //因为是页面嵌入，你就需要一个url，下面的url是之前自己写的一个页面
    //     content: 'http://localhost:63342/LayUI/code/form%E8%A1%A8%E5%8D%95%E4%B8%BB%E5%8A%A8%E9%AA%8C%E8%AF%81.html?_ijt=969gukuqr1rptp8rojoo742rjt/'
    // });


    // //加载层
    // var index = layer.load(2, {shade: false}); //0代表加载的风格，支持0-2
    // //loading层
    // var index = layer.load(1, {
    //     shade: [0.3,'#912'] //0.1透明度的白色背景
    // });

    // //小tips
    // layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '#bhid', {
    //     tips: [1, '#3595CC'],
    //     time: 4000
    // });

    // //prompt层
    // //formType为1是单行文本，formType为2的是多行文本
    //     layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
    //         layer.close(index);
    //         layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
    //             layer.close(index);
    //             layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);
    //         });
    //     });


    // //tab层
    // layer.tab({
    //     area: ['600px', '300px'],
    //     tab: [{
    //         title: 'TAB1',
    //         content: '内容1'
    //     }, {
    //         title: 'TAB2',
    //         content: '内容2'
    //     }, {
    //         title: 'TAB3',
    //         content: '内容3'
    //     }]
    // });

    //相册层
    // var jsonStr = '{"title": "标题", "id": "123", "start": 0,"data": [{"alt": "星辰","pid": "666","src": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F4%2F57844ad461ab6.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667827584&t=e06fb02d60e9c02b9a9c2e807d521985","thumb": ""},{"alt": "大海","pid": "666","src": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F1162244%2F25611001e10445c0a0265a71be744661.jpg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvMTE2MjI0NC8yNTYxMTAwMWUxMDQ0NWMwYTAyNjVhNzFiZTc0NDY2MS5qcGc%3D%2Fsign%2F9aa7348b5c9e6d937be168fa1387be85.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667828614&t=72d3d1b54a9dd6a3447acc25a4d4ddad","thumb": ""}]}';
    //
    // var json1 = JSON.parse(jsonStr);
    // layer.photos({
    //     photos: json1 //格式见API文档手册页
    //     ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
    // });
    //
    // //相册层
    // $.getJSON('test/photos.json?v='+new Date, function(json){
    //     layer.photos({
    //         photos: json //格式见API文档手册页
    //         ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
    //     });
    // });


    //显示自动关闭倒计秒数
    // layer.alert('在标题栏显示自动关闭倒计秒数', {
    //     time: 5*1000
    //     ,success: function(layero, index){
    //         var timeNum = this.time/1000,
    //         setText = function(start){
    //             layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
    //         };
    //         setText(!0);
    //         console.log("xiaoxi")
    //         this.timer = setInterval(setText, 1000);
    //         if(timeNum <= 0) clearInterval(this.timer);
    //     }
    //     ,end: function(){
    //         clearInterval(this.timer);
    //     }
    // });

});
</script>
</body>
</html>